<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../../../css/onsenui.css"/>
    <link rel="stylesheet" href="../../../../../css/onsen-css-components.css"/>

    <script src="../../../node_modules/onsenui/js/onsenui.js"></script>
    <script src="../../../node_modules/angular/angular.js"></script>
    <script src="../../../dist/angularjs-onsenui.js"></script>

    <script>
      ons.bootstrap()

      .controller('TestController', function($scope) {
        ons.ready(function() {
          ons.createAlertDialog('dialog.html').then(function(dialog) {
            $scope.dialog = dialog;
          });
        });

        $scope.show = function() {
          $scope.dialog.show();
        };
      });
    </script>
  </head>
  <body ng-controller="TestController">
    <ons-page>
      <ons-button ng-click="show()">Show dialog</ons-button>
    </ons-page>

    <ons-template id="dialog.html">
      <ons-alert-dialog var="dialog">
        <div class="alert-dialog-title"><strong style="color: #ff3333">Critical Alert!</strong></div>
        <div class="alert-dialog-content">
          An error has occurred!
        </div>
        <div class="alert-dialog-footer">
          <button class="alert-dialog-button" ng-click="dialog.hide();">OK</button>
        </div>
      </ons-alert-dialog>
    </ons-template>
  </body>
</html>
